<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .success { background-color: #d4edda; border-color: #c3e6cb; }
        .error { background-color: #f8d7da; border-color: #f5c6cb; }
        .info { background-color: #d1ecf1; border-color: #bee5eb; }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover { background-color: #0056b3; }
        pre { background-color: #f8f9fa; padding: 10px; border-radius: 3px; overflow-x: auto; }
    </style>
</head>
<body>
    <h1>API连接测试</h1>
    
    <div class="test-section info">
        <h3>测试说明</h3>
        <p>这个页面用于测试API连接是否正常。点击下面的按钮进行不同的测试。</p>
    </div>
    
    <div class="test-section">
        <h3>测试1: 基本连接测试</h3>
        <button onclick="testBasicConnection()">测试基本连接</button>
        <div id="basic-result"></div>
    </div>
    
    <div class="test-section">
        <h3>测试2: Axios测试</h3>
        <button onclick="testAxios()">测试Axios</button>
        <div id="axios-result"></div>
    </div>
    
    <div class="test-section">
        <h3>测试3: Fetch测试</h3>
        <button onclick="testFetch()">测试Fetch</button>
        <div id="fetch-result"></div>
    </div>
    
    <div class="test-section">
        <h3>测试4: JSONP测试</h3>
        <button onclick="testJSONP()">测试JSONP</button>
        <div id="jsonp-result"></div>
    </div>

    <script>
        const API_URL = 'http://149.88.80.204:8000/api/v1/company-info';
        
        function showResult(elementId, message, isSuccess = true) {
            const element = document.getElementById(elementId);
            element.innerHTML = `<pre>${message}</pre>`;
            element.parentElement.className = `test-section ${isSuccess ? 'success' : 'error'}`;
        }
        
        function testBasicConnection() {
            showResult('basic-result', '正在测试基本连接...', true);
            
            const img = new Image();
            img.onload = function() {
                showResult('basic-result', '✅ 服务器可达！\n但可能存在CORS限制。', true);
            };
            img.onerror = function() {
                showResult('basic-result', '❌ 服务器不可达或网络错误。', false);
            };
            img.src = API_URL + '?t=' + Date.now();
        }
        
        function testAxios() {
            showResult('axios-result', '正在使用原生AJAX测试...', true);
            
            const xhr = new XMLHttpRequest();
            xhr.open('GET', API_URL, true);
            xhr.timeout = 10000;
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.setRequestHeader('Accept', 'application/json');
            
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    try {
                        const data = JSON.parse(xhr.responseText);
                        showResult('axios-result', `✅ 原生AJAX调用成功！\n状态: ${xhr.status}\n数据: ${JSON.stringify(data, null, 2)}`, true);
                    } catch (e) {
                        showResult('axios-result', `✅ 原生AJAX调用成功！\n状态: ${xhr.status}\n原始数据: ${xhr.responseText}`, true);
                    }
                } else {
                    showResult('axios-result', `❌ 原生AJAX调用失败！\n状态: ${xhr.status}\n状态文本: ${xhr.statusText}\n响应: ${xhr.responseText}`, false);
                }
            };
            
            xhr.onerror = function() {
                showResult('axios-result', '❌ 原生AJAX调用失败！\n网络错误或CORS问题', false);
            };
            
            xhr.ontimeout = function() {
                showResult('axios-result', '❌ 原生AJAX调用超时！', false);
            };
            
            try {
                xhr.send();
            } catch (error) {
                showResult('axios-result', `❌ 发送请求失败: ${error.message}`, false);
            }
        }
        
        function testFetch() {
            showResult('fetch-result', '正在使用Fetch测试...', true);
            
            fetch(API_URL)
                .then(response => {
                    if (response.ok) {
                        return response.text();
                    }
                    throw new Error(`HTTP ${response.status}`);
                })
                .then(data => {
                    showResult('fetch-result', `✅ Fetch调用成功！\n数据: ${data}`, true);
                })
                .catch(error => {
                    showResult('fetch-result', `❌ Fetch调用失败！\n错误: ${error.message}`, false);
                });
        }
        
        function testJSONP() {
            showResult('jsonp-result', '正在使用JSONP测试...', true);
            
            const callbackName = 'jsonpCallback' + Date.now();
            window[callbackName] = function(data) {
                showResult('jsonp-result', `✅ JSONP调用成功！\n数据: ${JSON.stringify(data, null, 2)}`, true);
                delete window[callbackName];
            };
            
            const script = document.createElement('script');
            script.src = API_URL + '?callback=' + callbackName;
            script.onerror = function() {
                showResult('jsonp-result', '❌ JSONP调用失败！\n可能原因: 服务器不支持JSONP', false);
                delete window[callbackName];
            };
            
            document.head.appendChild(script);
            
            // 5秒后清理
            setTimeout(() => {
                if (script.parentNode) {
                    script.parentNode.removeChild(script);
                }
                if (window[callbackName]) {
                    delete window[callbackName];
                }
            }, 5000);
        }
        
        // 页面加载时自动运行基本测试
        window.onload = function() {
            testBasicConnection();
        };
    </script>
</body>
</html>
